<template>
  <div>
    <top-bar title="学生组织列表"></top-bar>
    <van-field
      readonly
      clickable
      name="college"
      :value="searchValue"
      left-icon="search"
      placeholder="点击搜索组织"
      clearable
      @click="collegePicker = true"
    />
    <van-popup v-model="collegePicker" position="bottom">
      <van-picker
        show-toolbar
        title="标题"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="collegePicker = false"
      />
    </van-popup>
    <!-- 联系人卡片 -->
    <van-empty v-if="orglist.length === 0" :description="description" />
    <van-pull-refresh v-else v-model="isLoading" @refresh="pullDown">
      <van-list
        v-model="loading"
        :finished="completed"
        :immediate-check="false"
        finished-text="没有更多了"
        loading-text="拼命加载中..."
        @load="pullUp"
      >
        <van-cell v-for="item in orglist" :key="item._id" @click="toDetail(item._id)">
          <van-row class="container">
            <van-col :span="2">
              <van-icon
                style="margin-left: 10px; line-height: 8vh;"
                size="0.8rem"
                color="rgb(200, 200, 200)"
                name="cluster"
              />
            </van-col>
            <van-col style="margin-left:20px;" :span="17">
              <van-row>
                <p style="margin-top: 10px; font-size: 14px;">
                  名称：
                  <span>{{item.orgname}}</span>
                </p>
                <p>
                  类型：
                  <span>{{item.orgtype}}</span>
                </p>
                <p style=" margin-top: -8px;font-size: 14px;">
                  标题：
                  <span>{{item.orgtopic}}</span>
                </p>
              </van-row>
            </van-col>
            <van-col :span="3" style="text-align: right; padding-right: 3px;">
              <van-icon color="#969799" style="line-height: 10vh;" size="0.45rem" name="arrow" />
            </van-col>
          </van-row>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import TopBar from "@/views/component/topBar";
export default {
  components: {
    TopBar
  },
  data() {
    return {
      orglist: [],
      description: "暂时还没有组织简介",
      pageNum: 1,
      pageSize: 5,
      isLoading: false,
      loading: false,
      finished: false, //全部数据
      completed: false, //是否加载完
      columns: [],
      typeList: [],
      collegePicker: false,
      searchValue: "",
      searchData: []
    };
  },
  mounted() {
    this.getOrgList();
    this.getOrgListAll();
  },
  methods: {
    getOrgList() {
      if (this.completed) return;
      this.loading = true;
      this.$api
        .get("/api/orginfo/list", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            orgname: this.searchData[1],
            orgtype: this.searchData[0]
          }
        })
        .then(res => {
          this.orglist.push(...res.data.data.records);
          this.loading = false;
          if (this.pageSize * this.pageNum > res.data.data.total) {
            this.completed = true;
          }
          this.isLoading = false;
        })
        .catch(err => {
          console.log(err, "errerr");
        });
    },
    getOrgListAll() {
      this.$api
        .get("/api/architecture/list")
        .then(res => {
          this.isTypeProcessing(res.data.data);
          this.isProcessing(res.data.data);
        })
        .catch(err => {
          console.log(err, "errerr");
        });
    },
    isTypeProcessing(arr) {
      let typeArr = [];
      this.typeList = [];
      arr.forEach(item => {
        typeArr.push(item.organtype);
      });
      typeArr = [...new Set(typeArr)];
      typeArr.forEach((item, index) => {
        let obj = {};
        obj.id = index + 1;
        obj.label = item;
        this.typeList.push(obj);
      });
    },
    isProcessing(arr) {
      this.columns = [];
      this.typeList.forEach((item, index) => {
        let obj = { text: "", children: [] };
        obj.text = item.label;
        this.columns.push(obj);
      });
      arr.forEach(item => {
        this.columns.forEach(items => {
          if (items.text === item.organtype) {
            let obj = {};
            obj.text = item.organname;
            items.children.push(obj);
          }
        });
      });
    },
    onConfirm(value) {
      this.orglist = [];
      this.pageNum = 1;
      this.completed = false;
      this.isLoading = true;
      this.searchValue = `${value[0]}/${value[1]}`;
      this.searchData = value;
      this.getOrgList();
      this.collegePicker = false;
    },
    //下拉刷新
    pullDown() {
      this.searchData = [];
      this.searchValue = "";
      this.orglist = [];
      this.pageNum = 1;
      this.completed = false;
      this.isLoading = true;
      this.getOrgList();
    },
    // 上滑加载
    pullUp() {
      if (this.completed) {
        return;
      }
      this.pageNum++;
      this.getOrgList();
    },
    toDetail(id) {
      this.$router.push({
        name: "organizationdetail",
        params: { id }
      });
    }
  }
};
</script>

<style scoped>
.container {
  border-bottom: 1px dotted rgb(238, 237, 237);
  background: #fff;
}
</style>